<template>
    <div style="height: 100%;">
        <div style="height: 100%;" class="qrcode-box">
            <div class="qrcode-content">
                <div id="canvas" class="img">
                    <div class="s-logo"></div>
                </div>
                <p>快乐消费．健康消费，让消费产生价值</p>
            </div>
        </div>
    </div>
</template>

<script>
    // import QRCode from 'qrcode'
    import {mapGetters} from "vuex"

    export default {
        name: "QRcode",
        data() {
            return {
                qrImage: ''
            }
        },
        mounted() {
            this.qrcode()
        },
        computed: {
            ...mapGetters(['userInfo'])
        },
        methods: {
            qrcode() {
                console.log(this.userInfo)
                var canvas = document.getElementById('canvas')
                // QRCode.toCanvas(canvas, 'http://mall.tianspace.vip/dist/index.html#/register?id=' + this.userInfo.id, () => {
                //     this.qrImage = new Image()
                //     this.qrImage.src = canvas.toDataURL("image/jpeg");
                // })
                var qrcode = new QRCode('canvas', {
                    text: 'http://mall.tianspace.vip/dist/index.html#/register?id=' + this.userInfo.id,
                    width: 150,
                    height: 150,
                    colorDark: '#5cde62',
                    colorLight: '#ffffff',
                });
                console.log(qrcode)


            },
        }
    }
</script>

<style scoped lang="scss">
    .qrcode-box {
        height: 100%;
        background: #fff;
        position: relative;
        .qrcode-content {
            position: absolute;
            top: 25%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 100%;
            text-align: center;
            font-size: 12px;
            .img {
                position: relative;
                display: flex;
                align-items: center;
                justify-content: center;
                margin-bottom: 10px;
                .s-logo {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    width: 48px;
                    height: 48px;
                    background: url("../../../public/img/logobig.png");
                    background-size: cover;

                }
            }
        }
    }
</style>